<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入layui css -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!-- 引入jquery js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="img/backgroundImg.jpg">
    <style>
        body{
            /*加载背景图*/
            background-image: url(img/backgroundImg.jpg);
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;  //此条属性必须设置否则可能无效/
            /* 让背景图基于容器大小伸缩 */
        background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            /*background-color: #CCCCCC;*/
        }
        .layui-container {
            margin: 170px auto;
            width: 1250px;
        }

        .h {
            margin: 10px;
        }

        .layui-form-item {
            text-align: center;
        }

        .layui-form {
            border-radius: 20px;
            border: 4px solid deepskyblue;
            background-color: azure;
        }

        .layui-input {
            width: 90%;
            height: 50px;
        }

        #sex {
            text-align: left;
        }

        #bir {
            text-align: left;
        }
    </style>
</head>
<body background="img/backgroundImg.jpg">
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md5 layui-col-md-offset3">
            <form class="layui-form" lay-filter="example" enctype="multipart/form-data" id="loginForm">
                <div><h1 style="text-align: center">注册</h1></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入用户名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <!--<div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password2" placeholder="请再次输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block" id="sex">
                        <input type="radio" name="sex" value="男" title="男" checked="">
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-block" id="bir"> <!-- 注意：这一层元素并不是必须的 -->
                        <input type="text" name="birthday" lay-verify="date" class="layui-input" id="birthday" placeholder="请选择出生日期">
                    </div>
                </div>

                <!--<div class="layui-form-item">
                <label class="layui-form-label">注册时间</label>
                <div class="layui-input-block" id="date">
                    <input type="text" class="layui-input" id="rigisterTime" placeholder="请选择注册时间">
                </div>
            </div>-->
                <!--<div class="layui-form-item">
                <label class="layui-form-label">上传头像</label>
                <button type="button" class="layui-btn" id="uploadImg" name="img">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">文件上传</label>
                    <div class="layui-input-inline">
                        <input type="file" name="filepath" class="layui-btn layui-btn-normal">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="verifyCode" lay-verify="required" placeholder="请输入验证码"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid" style="padding: 0!important;">
                        <!-- <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>-->
                        <img id="vcode" src="/user/getvcode" onclick="fresh()">
                    </div>
                </div>

                <div class="layui-form-item">
                    <button type="submit" class="layui-btn layui-btn-lg layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">提交</button>
                    <button type="reset" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">重置</button>
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius"
                            onclick="window.location.href='index.html'">返回
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    //点击图片刷新验证码
    function fresh() {
        document.getElementById("vcode").src="${pageContext.request.contextPath}/user/getvcode" + "?time=" + new Date().getTime();
    }
    /*layui.use(['laydate', 'upload'], function () {
        var laydate = layui.laydate;
        var upload = layui.upload;

        //执行一个laydate实例
        laydate.render({
            elem: '#birthday', //指定元素
            // elem: '#rigisterTime' //指定元素
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadImg' //绑定元素
            , url: '/upload/' //上传接口
            , done: function (res) {
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
            }
        });
    });*/

    // 加载layui的指定 模块
    layui.use(function(){
        // layui js 代码开始的位置

        var layer = layui.layer
            ,form = layui.form,
            $=layui.$;
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#birthday'
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            // debugger  // 实现浏览器调试断点
            console.log(data.field);
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // });


            // 获取包含了上传文件的表单的所有信息
            var formDate = new FormData(document.getElementById("loginForm"));

            // console.log(formDate)
            // 发送ajax请求
            $.ajax({
                url:'/user/register',
                type:'post',
                data:formDate,
                processData:false,
                contentType:false,
                success:function(ret){
                    console.log(ret);

                    if(ret.status=="0"){ // 登录成功
                        layer.msg(ret.msg,{icon:1})
                        location.href="/index.jsp";
                    }
                },
                error:function (ret) {
                    console.log(ret);
                    layer.msg(ret.msg);
                }
            });

            return false; // 取消表单的默认提交行为
        });


        form.verify({
            name: function(title){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(title)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(title)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(title)){
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(title === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            }
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
    });
</script>
</script>
</html>